<!--网关管理  -->
<template>
  <div class="">
    <el-card>
      <el-row style="margin-bottom: 5px">
        <el-col :span="24">
          <el-button type="primary" @click="addGgp" size="mini" v-has="'add'"
            >添加网关</el-button
          >
        </el-col>
      </el-row>
      <yg-table :columns="columns" :tableList="TableList" :loading="loading">
        <el-table-column slot="action" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-tooltip content="编辑" placement="top" effect="light">
              <el-button
                type="primary"
                icon="el-icon-edit"
                circle
                @click="editGgp(scope.row)"
                size="mini"
                v-has="'edit'"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="删除" placement="top" effect="light">
              <el-button
                type="danger"
                icon="el-icon-delete"
                circle
                @click="delectGgp(scope.row)"
                size="mini"
                v-has="'del'"
              >
              </el-button>
            </el-tooltip>
            <el-tooltip content="请求网关参数" placement="top" effect="light">
              <el-button
                type="success"
                icon="el-icon-info"
                circle
                @click="reqParam(scope.row)"
                size="mini"
              ></el-button>
            </el-tooltip>
            <el-tooltip content="请求告警" placement="top" effect="light">
              <el-button
                type="success"
                icon="el-icon-s-opportunity"
                circle
                @click="reqWarning(scope.row)"
                size="mini"
              >
              </el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </yg-table>
    </el-card>
    <!-- 添加弹窗 -->
    <el-dialog
      title="添加网关"
      :visible.sync="addGgpDialogVisible"
      width="50%"
      @close="addGgpDialogClose"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="addGgpForm"
        :formObj="addGgpFromObj"
        :formData="addGgpFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="addGgpDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="addGgpConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <!-- 修改Topic信息 -->
    <el-dialog
      title="修改网关"
      :visible.sync="editGgpDialogVisible"
      width="50%"
      @close="editGgpDialogClose"
      :close-on-click-modal="false"
    >
      <yg-from
        ref="editGgpForm"
        :formObj="editGgpFromObj"
        :formData="editGgpFromData"
      ></yg-from>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="editGgpDialogVisible = false"
          >取 消</el-button
        >
        <el-button size="mini" type="primary" @click="editGgpConfirm"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { myStorage } from "@/utils/localStorage";
import YgTable from "@/components/Table/YgTable.vue";
import YgFrom from "@/components/Form/YgFrom.vue";
import {
  setMessageCallback,
  publishMsg,
  removeMessageCallback,
  checkSpecialId,
} from "@/mqtt";
export default {
  //import引入的组件需要注入到对象中才能使用
  name: "ParamGateway",
  components: {
    YgTable,
    YgFrom,
  },
  data() {
    //这里存放数据
    return {
      gw_sn: "",
      addGgpDialogVisible: false, //添加网关弹窗显隐
      editGgpDialogVisible: false, //修改网关信息
      columns: [
        {
          prop: "gw_sn",
          label: "出厂编号",
          align: "left",
          minWidth: 200,
          fixed: "left",
        },
        {
          prop: "gw_short_sn",
          label: "短编号",
        },
        {
          prop: "gw_name",
          label: "网关名称",
        },
        // {
        //   prop: "gw_desc",
        //   label: "网关描述",
        // },
        {
          prop: "gw_addr",
          label: "安装位置",
        },
        {
          prop: "online",
          label: "是否在线",
          formatter(row) {
            if (row.hasOwnProperty("online")) {
              return row.online == 1 ? "在线" : "离线";
            } else {
              return "";
            }
          },
        },
        {
          prop: "te_total",
          label: "终端总数",
        },
        {
          prop: "te_offline",
          label: "离线终端数量",
          width: 95,
        },
        {
          prop: "te_online",
          label: "在线终端数量",
          width: 95,
        },
        {
          prop: "alarm_level",
          label: "告警级别",
          formatter(row) {
            if (row.hasOwnProperty("alarm_level")) {
              switch (row.alarm_level) {
                case 0:
                  return "无";
                case 1:
                  return "通知";
                case 2:
                  return "一般";
                case 3:
                  return "严重";
                default:
                  return "";
              }
            } else {
              return "";
            }
          },
        },
        {
          prop: "update_time",
          label: "当前(离线)时间",
          width: 170,
        },
        {
          prop: "cpu_per",
          label: "cpu负载",
        },
        {
          prop: "total_mem",
          label: "总内存",
        },
        {
          prop: "used_mem",
          label: "使用内存",
        },
        {
          prop: "hw_ver",
          label: "固件版本",
          width: 200,
        },
        {
          prop: "start_tm",
          label: "启动时间",
          width: 170,
        },
        { slot: "action" },
      ],
      TableList: [],
      addGgpFromObj: [
        {
          input: true, //是input
          label: "出厂编号", //字段
          prop: "gw_sn", //字段名
          width: 12, //参考el-col
          placeholder: "请输入出厂编号",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入出厂编号",
            },
          ],
        },
        {
          input: true, //是input
          label: "网关名称", //字段
          prop: "gw_name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入网关名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入描述",
            },
          ],
        },
        {
          input: true, //是input
          label: "用途描述", //字段
          prop: "gw_desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入网关用途描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "位置描述", //字段
          prop: "gw_addr", //字段名
          width: 12, //参考el-col
          placeholder: "请输入安装位置描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          select: true, //是select
          label: "告警级别", //字段
          prop: "alarm_level", //字段名
          width: 12, //参考el-col
          placeholder: "请输入告警级别",
          disabled: false, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "无", value: 0 },
            { label: "通知", value: 1 },
            { label: "一般", value: 2 },
            { label: "严重", value: 3 },
          ],
        },
      ],
      addGgpFromData: {
        gw_sn: "",
        gw_name: "",
        gw_desc: "",
        gw_addr: "",
        alarm_level: 0,
      },
      editGgpFromObj: [
        {
          input: true, //是input
          label: "出厂编号", //字段
          prop: "gw_sn", //字段名
          width: 12, //参考el-col
          placeholder: "请输入出厂编号",
          disabled: true, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入出厂编号",
            },
          ],
        },
        {
          input: true, //是input
          label: "网关名称", //字段
          prop: "gw_name", //字段名
          width: 12, //参考el-col
          placeholder: "请输入网关名称",
          disabled: false, //是否禁用
          labelWidth: "80px",
          rules: [
            {
              required: true,
              message: "请输入描述",
            },
          ],
        },
        {
          input: true, //是input
          label: "用途描述", //字段
          prop: "gw_desc", //字段名
          width: 12, //参考el-col
          placeholder: "请输入网关用途描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          input: true, //是input
          label: "位置描述", //字段
          prop: "gw_addr", //字段名
          width: 12, //参考el-col
          placeholder: "请输入安装位置描述",
          disabled: false, //是否禁用
          labelWidth: "80px",
        },
        {
          select: true, //是select
          label: "告警级别", //字段
          prop: "alarm_level", //字段名
          width: 12, //参考el-col
          placeholder: "请输入告警级别",
          disabled: false, //是否禁用
          labelWidth: "80px",
          options: [
            { label: "无", value: 0 },
            { label: "通知", value: 1 },
            { label: "一般", value: 2 },
            { label: "严重", value: 3 },
          ],
        },
      ],
      editGgpFromData: {
        gw_sn: "",
        gw_name: "",
        gw_desc: "",
        gw_addr: "",
        alarm_level: "",
      },
      loading: false,
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    addGgp() {
      this.addGgpDialogVisible = true;
    },
    editGgp(val) {
      // console.log("修改网关信息", val);
      this.editGgpDialogVisible = true;
      // this.editGgpFromData = { ...val };
      this.editGgpFromData.gw_sn = val.gw_sn;
      this.editGgpFromData.gw_name = val.gw_name;
      this.editGgpFromData.gw_desc = val.gw_desc;
      this.editGgpFromData.gw_addr = val.gw_addr;
      this.editGgpFromData.alarm_level = Number(val.alarm_level) || "";
    },
    delectGgp(val) {
      //console.log("删除网关", val);
      this.$confirm(
        "删除网关,将同时删除该网关下所有配置的参数,包括五遥等信息，是否确定删除?",
        "删除网关",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      )
        .then(() => {
          let newMsg = {
            webMsgType: 1007,
            funCode: 2,
          };
          newMsg.data = { gw_sn: val.gw_sn };
          this.gw_sn = val.gw_sn;
          publishMsg(newMsg);
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    reqParam(val) {
      let newMsg = {
        webMsgType: 1007,
        funCode: 4,
      };
      newMsg.data = { gw_sn: val.gw_sn };
      this.gw_sn = val.gw_sn;
      publishMsg(newMsg);
    },
    reqWarning(val) {
      let newMsg = {
        webMsgType: 1007,
        funCode: 5,
      };
      newMsg.data = { gw_sn: val.gw_sn };
      this.gw_sn = val.gw_sn;
      publishMsg(newMsg);
    },
    editGgpConfirm() {
      // this.$nextTick(() => {
      if (this.$refs.editGgpForm.submitForm()) {
        let newMsg = {
          webMsgType: 1007,
          funCode: 3,
        };
        newMsg.data = this.editGgpFromData;
        this.gw_sn = this.editGgpFromData.gw_sn;
        publishMsg(newMsg);
        this.editGgpDialogVisible = false;
      }
      // });
    },
    editGgpDialogClose() {
      this.$refs.editGgpForm.resetForm();
    },
    async addGgpConfirm() {
      if (this.$refs.addGgpForm.submitForm()) {
        let newMsg = {
          webMsgType: 1007,
          funCode: 1,
        };
        newMsg.data = {
          gw_sn: this.addGgpFromData.gw_sn,
          gw_desc: this.addGgpFromData.gw_desc,
          gw_name: this.addGgpFromData.gw_name,
          gw_addr: this.addGgpFromData.gw_addr,
          alarm_level: Number(this.addGgpFromData.alarm_level),
        };
        this.gw_sn = this.addGgpFromData.gw_sn;
        publishMsg(newMsg);

        const deleInfo = await this.$confirm("是否获取网关参数?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).catch((err) => err);
        if (deleInfo === "confirm") {
          let newMsg = {
            webMsgType: 1007,
            funCode: 4,
          };
          newMsg.data = { gw_sn: this.addGgpFromData.gw_sn };
          publishMsg(newMsg);
        }
        this.addGgpDialogVisible = false;
      }
    },
    addGgpDialogClose() {
      this.$refs.addGgpForm.resetForm();
    },
    onMessage(topic, msg) {
      switch (msg.webMsgType) {
        case 1007:
          switch (msg.funCode) {
            case 0:
              if (msg.retCode != 0 || !msg.data) {
                this.$message.error(msg.retMsg);
              } else {
                this.TableList = msg.data;
                this.loading = false;
              }
              break;
            case 1:
              if (checkSpecialId(msg)) {
                if (msg.data.gw_sn == this.gw_sn) {
                  if (msg.retCode != 0) {
                    this.$message.error(msg.retMsg);
                  } else {
                    this.$message.success("添加网关成功");
                  }
                }
              }
              break;
            case 2:
              if (checkSpecialId(msg)) {
                if (msg.data.gw_sn == this.gw_sn) {
                  if (msg.retCode != 0) {
                    this.$message.error(msg.retMsg);
                  } else {
                    this.$message.success("删除网关成功");
                  }
                }
              }
              break;
            case 3:
              if (checkSpecialId(msg)) {
                if (msg.data.gw_sn == this.gw_sn) {
                  if (msg.retCode != 0) {
                    this.$message.error(msg.retMsg);
                  } else {
                    this.$message.success("修改网关信息成功");
                  }
                }
              }
              break;
            case 4:
              if (checkSpecialId(msg)) {
                if (msg.data.gw_sn == this.gw_sn) {
                  if (msg.retCode != 0) {
                    this.$message.error(msg.retMsg);
                  } else {
                    this.$message.success("请求网关参数成功");
                  }
                }
              }
              break;
            case 5:
              if (checkSpecialId(msg)) {
                if (msg.data.gw_sn == this.gw_sn) {
                  if (msg.retCode != 0) {
                    this.$message.error(msg.retMsg);
                  } else {
                    this.$message.success("请求网关当前告警信息成功");
                  }
                }
              }
              break;
            case 6:
              if (msg.retCode != 0) {
                return this.$message.error(msg.retMsg);
              } else {
                for (let i = 0; i < this.TableList.length; i++) {
                  if (this.TableList[i].gw_sn == msg.data.gw_sn) {
                    this.TableList[i].online = msg.data.online;
                    this.TableList[i].update_time = msg.data.update_time;
                    this.TableList[i].cpu_per = msg.data.cpu_per;
                    this.TableList[i].hw_ver = msg.data.hw_ver;
                    this.TableList[i].used_mem = msg.data.used_mem;
                    this.TableList[i].start_tm = msg.data.start_tm;
                    this.TableList[i].total_mem = msg.data.total_mem;
                    this.TableList[i].te_total = msg.data.te_total;
                    this.TableList[i].te_offline = msg.data.te_offline;
                    this.TableList[i].te_online = msg.data.te_online;
                  }
                }
              }
              break;
            default:
              break;
          }
      }
    },
    // 按钮点击
    buttonClick(index, prop) {
      //console.log(index, prop);
      if (index == "resetButton") {
        this.$refs.publicForm.resetForm();
      }
    },
  },
  created() {},
  mounted() {
    setMessageCallback(this.onMessage);
    publishMsg({
      webMsgType: 1007,
      funCode: 0,
    });
    this.loading = true;
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  destroyed() {
    removeMessageCallback(this.onMessage);
  },
};
</script>
<style lang="scss" scoped>
::v-deep .el-card__body {
  padding: 5px 5px 5px 5px;
}
</style>
